(function () {
    //第一幅图的的图片盒子
    let bgimg = document.querySelector('.container_1 .bg  .swiper-wrapper');//背景盒子
    let conimg = document.querySelector('.container_1 .sw_bg  .swiper-wrapper');//内容盒子
    let mySwiperOnebg = document.querySelector('.mySwiperOnebg')
    let mySwiperOne = document.querySelector('.mySwiperOne')
    //热门推荐的盒子
    let hotbox = document.getElementById('hotbox')
    //轮播图的盒子
    let swiperTwoBox=document.querySelector('.mySwiperTwo .swiper-wrapper')
    //飙升榜
    let up=document.getElementById('up')
    //新歌榜
    let newSong=document.getElementById('newSong')
    //原创榜
    let originSong=document.getElementById('originSong')
    //获取数据
    axios.get('./data.json').then((response) => {
        return response.data
    }).then((value) => {
        render(value);
    }).catch(err => {
        console.log(err);
    })

    //榜单的封装
    function songList(songbox,data) {
        let str='';
        data.forEach((item,index)=>{
            str+=`<li>
                    <span>${index+1}</span>
                    <a href="">${item.music}</a>
                    <div class="oper">
                    <a class="oper_1" href=""></a>
                    <a class="oper_2" href=""></a>
                    <a class="oper_3" href=""></a>
                    </div>
                </li>`
      })
      songbox.innerHTML=str;
    }
    //循环渲染
    function render(data) {
        console.log(data);
        //渲染第一幅轮播图
        let strbg = '';
        let strcon = '';
        data[0].swiper1.forEach(item => {
            strbg += `<div class="swiper-slide">
                       <img src="${item.background}"  alt="">
                       </div>`
            strcon += `<div class="swiper-slide">
                       <img src="${item.pic}"  alt="">
                       </div>`
        });
        //渲染后的数据插入到页面中
        bgimg.innerHTML = strbg;
        conimg.innerHTML = strcon;

        //轮播图的功能使用
        //背景图的轮播
        var mySwiperOnebg = new Swiper('.mySwiperOnebg', {
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            effect: 'fade',//切换效果
        })
        //第一个轮播
        var mySwiperOne = new Swiper('.mySwiperOne', {
            controller: {//双向控制，背景图跟随第一个轮播一起动
                control: mySwiperOnebg,
            },
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },//自动播放
            // direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项
            effect: 'fade',//切换效果
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,//点击小圆点切换
                bulletClass: 'my-bullet',//非激活状态的class
                bulletActiveClass: 'my-bullet-active',//激活状态下的class
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })

        //热门推荐
        let hotstr = '';
        data[2].recommend.forEach(item => {
            let { pic, nb, tit, i } = item;
            hotstr += `<li>
                            <div class="img">
                            <img src="${pic}" alt="">
                            <a class="eff" href=""></a>
                            <div class="btm">
                                <a href=""></a>
                                <span class="icon-headset"></span>
                                <span class="nb">${nb}</span>
                            </div>
                            </div>
                            <p>${i?'<i></i>':''}<a href="">${tit}</a></p>
                       </li>`
        })
        hotbox.innerHTML = hotstr;

        //新碟上架
        let strSwiperTwo='';
        data[1].swiper2.forEach(item=>{
            let {id,pic,title,creator}=item;
        strSwiperTwo+=`<div class="swiper-slide" data-id=${id}>
                            <img src="${pic}"
                            alt="">
                            <a class="ply" href=""></a>
                            <a class="msk" href=""></a>
                            <p class="tit1"><a href="">${title}</a></p>
                            <p class="tit2"><a href="">${creator}</a></p>
                        </div>`
        })
        swiperTwoBox.innerHTML=strSwiperTwo;
        //新碟上架 轮播图
        var mySwiperTwo = new Swiper ('.mySwiperTwo', {
            loop: true, // 循环模式选项
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            slidesPerView : 5,//同时展示 5个
            slidesPerGroup : 5,//每次切换 5个
          })

          //榜单
          songList(up,data[3])//飙升榜
          songList(newSong,data[4])//新歌榜
          songList(originSong,data[5])//原创榜
    }
    //返回顶部
    let back=document.querySelector('.back');
    let html=document.documentElement||document.body;
    window.onscroll=function(){
        if (html.scrollTop>=100) {
            back.style.opacity=1;
            back.style.zIndex=9999;

        } else {
            back.style.opacity=0;
            back.style.zIndex=-9999;
        }
    }
})();

//音频播放
(function () {
    let play=document.getElementById('play');//播放按钮
    let audioBox=document.getElementById("audioBox");//音频
    let cur=document.getElementById('cur');//进度条
    let timeEM=document.querySelector('#mus_tim em');//播放时间显示
    let timeSpan=document.querySelector('#mus_tim span');//播放总时间显示
    let timer=null;
    let myplayer=document.getElementById('myplayer')//播放组件
    let vol=document.querySelector('.vol')//声音进度条
    let loop_tip=document.querySelector(".loop_tip");//换播放方式
    let icn_list=document.querySelector('.icn_list');//播放列表的值
    let musicPic=document.getElementById('musicPic');//歌曲图片
    tit_mus=document.querySelector('.tit_mus');//歌曲名字
    tit_aur=document.querySelector('.tit_aur');//歌曲作者
   
    //将时间转换成分分秒。
    function formatTime(time) {
        let minutes=Math.floor(time/60);
        let seconds=Math.ceil(time-minutes*60);
        if (minutes<10){minutes="0"+minutes}
        if (seconds<10){seconds="0"+seconds}
        return `${minutes}:${seconds}`

    }
    //1.先往列表里添加歌曲---手动添加
    let  musicMethod={
        songs:[],//音乐列表
        index:0,//目前播放音乐的索引
        add(url,pic,name,author){
            this.songs.push({url,pic,name,author})
            icn_list.innerHTML=this.songs.length
        },
        change(){//更换 音乐地址，音乐图片，音乐名称，作者
            musicPic.src=this.songs[this.index]['pic'];//音乐图片
            audioBox.src=this.songs[this.index]['url'];//音乐地址
            tit_mus.innerHTML=this.songs[this.index]['name'];//音乐名称
            tit_aur.innerHTML=this.songs[this.index]['author'];//音乐作者
            //播放音乐
            this.showplay();
        },
        showplay() {//音乐播放
            if (audioBox.paused) {//是否暂停
                audioBox.play();//播放
                play.classList.add('pas');//播放按钮的效果
                timer=setInterval(()=>{
                    this.showProgress()
                },1000)
            } else {
                audioBox.pause()//暂停
                play.classList.remove('pas');//暂停按钮的效果
                clearInterval(timer);
                timer=null;
            }
        },
         //进度条
         showProgress() {
            let allTime=audioBox.duration;//总时间  不能直接求，缓存后求
            let curTime=audioBox.currentTime;//播放时间
            if (isNaN(allTime)||isNaN(curTime)) {
                return ;
            }
            timeEM.innerHTML=formatTime(curTime)
            timeSpan.innerHTML="/"+formatTime(allTime)//显示总时间
            let result=parseFloat(curTime/allTime*100).toFixed(3);
            if (result>100) {
                result=100;
            }
            //进入下一首---拖拽调试
            if(curTime>=allTime||result==100||audioBox.ended){
                this.next();
            }
            cur.style.width=result+'%';//控制宽度来让进度条跟着时间动
        },
        next(){
            this.index++;
            if (this.index>this.songs.length-1) {
                this.index=0;
            }
            this.change();
        },
        prev(){
            this.index--;
            if (this.index<0) {
                this.index=this.songs.length-1;
            }
            this.change();
        }
    }
    musicMethod.add("./media/合拍.m4a", "https://p1.music.126.net/Ethtz4VJFKtuuhpcd9WLzg==/109951168252754401.jpg?param=34y34", "合拍", "许嵩");
   musicMethod.add("./media/精卫.m4a", "https://p3.music.126.net/jSH_ikeooxveWl0BTc3Xkg==/109951166786983190.jpg?param=34y34", "精卫", "30年前，50年后");
   musicMethod.add("./media/若把你.m4a", "https://p4.music.126.net/M877M2-VhWZiLPVFORf9iQ==/109951163401482434.jpg?param=34y34", "若把你", "Kirsty刘瑾睿");
   musicMethod.add("./media/我记得.m4a", "https://p4.music.126.net/FCWD6ibS2JK2B3QAnXuzwQ==/109951167805892385.jpg?param=34y34", "我记得", "赵雷");


    //音乐组的点击事件---事件委托
    myplayer.onclick=function (e) {
        //点击上一首
        if (e.target.tagName=="A"&&e.target.className.includes('pre')) {
            // console.log('上一首');
            musicMethod.prev();
        }
        //点击中间的播放
        if(e.target.tagName=="A"&&e.target.className.includes("play")){
            musicMethod.showplay();
        }
        //点击下一首
        if (e.target.tagName=="A"&&e.target.className.includes('nex')) {
            // console.log('下一首');
            musicMethod.next();
        }
        //声量
        if (e.target.tagName=="A"&&e.target.className.includes('icn_vol')) {
            // console.log('音量');
            if (vol.style.display=='block') {
                vol.style.display='none';
            } else {
                vol.style.display='block';
            }
            return;
        }
        //点击切换播放模式
        if (e.target.tagName=="A"&&e.target.className.includes('icn_c')) {
            // console.log('切换');
            //点击后提示文字，立刻显示，1000毫秒后消失
            loop_tip.style.display='block';
            setTimeout(()=>{
            loop_tip.style.display='none';
            },1000)
            //1.如果是循环模式就切换成随机模式
            if (e.target.className.includes('icn_loop')) {
                e.target.classList.remove('icn_loop')
                e.target.classList.add('icn_shuff')
                loop_tip.innerHTML='随机'
                return
            }
            //1.如果是随机模式就切换成循环模式
            if (e.target.className.includes('icn_shuff')) {
                e.target.classList.add('icn_one')
                e.target.classList.remove('icn_shuff')
                loop_tip.innerHTML='单曲循环'
                return
            }
            //1.如果是单曲循环模式就切换成循环模式
            if (e.target.className.includes('icn_one')) {
                e.target.classList.add('icn_loop')
                e.target.classList.remove('icn_one')
                loop_tip.innerHTML='循环'
                return
            }
        }
        
    }  
    //打开页面 先缓存 之后求总时间
    audioBox.onloadedmetadata=musicMethod.showProgress();

    //拖拽
    let criclebox=document.getElementById('criclebox');//进度条的小圆点
    let rdy=document.querySelector('.rdy')//灰色背景条
    let rdyW=rdy.offsetWidth;//灰色背景条的总长度
    let startX=0,left=0,endX=0,resultX=0;
    //移入到小圆点，按下
    criclebox.onmousedown=function(e){
        startX=e.clientX;
        left=this.offsetLeft;
        window.addEventListener('mousemove',move)
        window.addEventListener('mouseup',up)
    }
    //小圆点移动
    function move(e) {
        e.preventDefault();
        endX=e.clientX;
        resultX=endX-startX+left;
        let res=resultX/rdyW*100;
        if (res>100) {
            res=100;
        }
        cur.style.width=res+'%';
    }
    function up() {
        window.removeEventListener('mousemove',move)
        window.removeEventListener('mouseup',up)

        let dargTime=resultX/rdyW*audioBox.duration;
        audioBox.currentTime=dargTime;//修改播放时间
        audioBox.pause();//抬起暂停
        musicMethod.showplay();
    }


})()
